<template>
  <!-- 添加产品 -->
  <div class="add-customer">
    <a-modal title="添加客户信息" :visible="props.show" @ok="handleOK" @cancel="close">
      <a-form ref="formRef" :model="addForm" :rules="rules" :label-col="{span:6}" :wrapper-col="{span:12}">
        <a-form-item label="客户名" name="cusName">
          <a-input v-model:value="addForm.cusName" />
        </a-form-item>
        <a-form-item label="法人" name="legalPerson">
          <a-input v-model:value="addForm.legalPerson" />
        </a-form-item>
        <a-form-item label="省级行政区" name="province">
          <!-- placeholder="请选择" 没效果？？ -->
          <a-select v-model:value="addForm.province" :options="cities">
          </a-select>
        </a-form-item>
        <a-form-item label="客户类型 " name="cusType">
          <a-select ref="select" v-model:value="addForm.cusType" placeholder="请选择">
            <a-select-option value="0">潜在客户</a-select-option>
            <a-select-option value="1">意向客户</a-select-option>
            <a-select-option value="2">真正客户</a-select-option>
            <a-select-option value="3">历史客户</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="满意度">
          <a-rate v-model:value="addForm.satisfaction" />
        </a-form-item>
        <a-form-item label="信用度">
          <a-rate v-model:value="addForm.credit" />
        </a-form-item>
        <a-form-item label="地址">
          <a-input v-model:value="addForm.cusAddress" />
        </a-form-item>
        <a-form-item label="电话">
          <a-input v-model:value="addForm.cusPhone" />
        </a-form-item>
        <a-form-item label="网站">
          <a-input v-model:value="addForm.cusWebsite" />
        </a-form-item>
        <a-form-item label="注册资金">
          <a-input v-model:value="addForm.cusFund" />
        </a-form-item>
        <a-form-item label="注册号">
          <a-input v-model:value="addForm.cusLicence" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, onMounted, reactive, ref } from "vue";
import { customer } from "../../../service";
import axios from "axios";
import { message } from "ant-design-vue";

//不要ref  表单初始数据

export default defineComponent({
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    initData: {
      type: Object,
    },
  },
  setup(props, context) {
    /**表单校验 */
    const formRef = ref();
    const rules = {
      cusName: [
        {
          required: true,
          message: "客户名必填",
          trigger: "blur",
        },
      ],
      legalPerson: [
        {
          required: true,
          message: "法人必填",
          trigger: "blur",
        },
      ],
      province: [
        {
          required: true,
          message: "省份必选",
          trigger: "blur",
        },
      ],
      cusType: [
        {
          required: true,
          message: "客户类型必选",
          trigger: "blur",
        },
      ],
    };
    /**添加信息 */
    const addForm = ref(JSON.parse(JSON.stringify(props.initData))); //原始数据props.initData  接口数据addForm
    const handleOK = async () => {
      formRef.value.validate().then(async () => {
        // console.log('test 更新的',addForm.value);
        const res = await customer.add(addForm.value);//更新操作  addForm.value会自动多_id字段
        if (res.data.code == 200) {
          console.log("customer.add", res.data.data);
          message.success(res.data.msg);
          //刷新表格
          context.emit("refresh");
          //添加成功,关闭modal
          context.emit("setShow", false);
        }
      });
    };
    /**关闭弹窗 */
    const close = () => {
      context.emit("setShow", false);
    };

    /**获取多选框 省份 */
    const cities = ref([]);
    const getCity = () => {
      axios.get("data/province.json").then((res) => {
        console.log("getCity_res", res.data.result);
        cities.value = res.data.result;
      });
    };
    //搜索不起效果？？
    // const filterOption = (input, option) => {
    //   return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    // };
    onMounted(() => {
      getCity();
    });
    return {
      formRef,
      rules,
      cities,

      addForm,
      // formData,
      handleOK,

      props,
      close,
    };
  },
});
</script>

<style lang='less'>
</style>